(function loading() {
    const resources = [
        './images/system/bug.png',
        './images/system/danger.png',
        './images/system/delete.png',
        './images/system/logout.png',
        './images/system/not-pin.png',
        './images/system/pin.png',
        './images/system/refresh.webp',
        './images/system/system.webp',
        './images/apps/appstore.png',
        './images/apps/css.png',
        './images/apps/editor.png',
        './images/apps/html.png',
        './images/apps/js.png',
        './images/apps/md.png',
        './images/apps/txt.png',
        './js/Util.js',
        './js/style.js',
        '/socket.io/socket.io.js',
        './js/component/Desktop.js',
        './js/component/Http.js',
        './js/component/login.js',
        './js/component/Message.js',
        './js/component/Mouse.js',
        './js/component/SandBox.js',
        './js/component/Slide.js',
        './js/component/TaskBar.js',
        './js/component/User.js',
        './js/component/Win.js',
    ]

    function getExtension(url) {
        return url.substring(url.lastIndexOf('.') + 1);
    }

    document.body.innerHTML = `
    <style>
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: url(../images/background-03.webp);
        }

        .resources {
            opacity: 0;
        }

        .mask {
            height: 100vh;
            width: 100vw;
            position: fixed;
            top: 0;
            left: 0;
            background-color: transparent;
            backdrop-filter: blur(2px);
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
        }

        .spinner {
            margin-top: 18%;
            position: relative;
            width: 60px;
            height: 60px;
            flex-shrink: 0;
        }

        .container1>div,
        .container2>div,
        .container3>div {
            width: 16px;
            height: 16px;
            background-color: #1b86db;
            border-radius: 100%;
            position: absolute;
            -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
            animation: bouncedelay 1.2s infinite ease-in-out;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }

        .spinner .spinner-container {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .container2 {
            -webkit-transform: rotateZ(45deg);
            transform: rotateZ(45deg);
        }

        .container3 {
            -webkit-transform: rotateZ(90deg);
            transform: rotateZ(90deg);
        }

        .circle1 {
            top: 0;
            left: 0;
        }

        .circle2 {
            top: 0;
            right: 0;
        }

        .circle3 {
            right: 0;
            bottom: 0;
        }

        .circle4 {
            left: 0;
            bottom: 0;
        }

        .container2 .circle1 {
            -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s;
        }

        .container3 .circle1 {
            -webkit-animation-delay: -1.0s;
            animation-delay: -1.0s;
        }

        .container1 .circle2 {
            -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
        }

        .container2 .circle2 {
            -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s;
        }

        .container3 .circle2 {
            -webkit-animation-delay: -0.7s;
            animation-delay: -0.7s;
        }

        .container1 .circle3 {
            -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s;
        }

        .container2 .circle3 {
            -webkit-animation-delay: -0.5s;
            animation-delay: -0.5s;
        }

        .container3 .circle3 {
            -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s;
        }

        .container1 .circle4 {
            -webkit-animation-delay: -0.3s;
            animation-delay: -0.3s;
        }

        .container2 .circle4 {
            -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s;
        }

        .container3 .circle4 {
            -webkit-animation-delay: -0.1s;
            animation-delay: -0.1s;
        }

        @-webkit-keyframes bouncedelay {

            0%,
            80%,
            100% {
                -webkit-transform: scale(0.0)
            }

            40% {
                -webkit-transform: scale(1.0)
            }
        }

        @keyframes bouncedelay {

            0%,
            80%,
            100% {
                transform: scale(0.0);
                -webkit-transform: scale(0.0);
            }

            40% {
                transform: scale(1.0);
                -webkit-transform: scale(1.0);
            }
        }

        .loading {
            margin-top: 30px;
            width: 300px;
            height: 100px;
            background-color: #00000080;
            color: #fff;
            font-size: 12px;
            padding: 10px 20px;
        }

        .loading .container {
            width: 100%;
            height: 100%;
            padding-top: 5px;
            position: relative;
            overflow: hidden;
        }

        .loading p {
            margin: 5px 0;
        }

        .loading .container .inner {
            position: absolute;
            bottom: 0;
            min-height: 100%;
        }

        .resources {
            position: fixed;
            top: 100vh;
        }
    </style>
    <div class="mask">
            <div class="spinner">
                <div class="spinner-container container1">
                    <div class="circle1"></div>
                    <div class="circle2"></div>
                    <div class="circle3"></div>
                    <div class="circle4"></div>
                </div>
                <div class="spinner-container container2">
                    <div class="circle1"></div>
                    <div class="circle2"></div>
                    <div class="circle3"></div>
                    <div class="circle4"></div>
                </div>
                <div class="spinner-container container3">
                    <div class="circle1"></div>
                    <div class="circle2"></div>
                    <div class="circle3"></div>
                    <div class="circle4"></div>
                </div>
            </div>
            <div class="loading">
                <div class="container">
                    <div class="inner" id="loading">
                        <p>Loading resources......</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="resources" id="res"></div>
        `;

    const resContainer = document.getElementById('res');
    const loadingContainer = document.getElementById('loading');

    const len = resources.length;
    let counter = 0;
    function loadSource(resources, container, callback) {
        for (let i = 0; i < resources.length; i++) {

            const extension = getExtension(resources[i]).toLowerCase();
    
            let elem;
            
            if (extension === 'css') {
                elem = document.createElement('link');
                elem.setAttribute('rel', 'stylesheet');
                elem.setAttribute('href', resources[i]);
            } else if (extension === 'js') {
                elem = document.createElement('script');
                elem.setAttribute('type', 'module');
                elem.setAttribute('src', resources[i]);
            } else if (extension === 'jpg' || extension === 'png'
                || extension === 'gif' || extension === 'webp'
                || extension === 'ico' || extension === 'svg'
                || extension === 'jpeg') {
                elem = document.createElement('img');
                elem.setAttribute('src', resources[i]);
            }
            container.appendChild(elem);
            if (callback) {
                const loading = document.createElement('p');
                loading.innerHTML = `Loading ${resources[i]}`;
        
                elem.onload = function () {
                    loading.innerHTML = `Loading ${resources[i]}......<span style="color: green">DONE</span>`;
                    loadingContainer.appendChild(loading);
                    counter++;
                    if (counter === len) {
                        const script = document.createElement('script');
                        script.setAttribute('src', './js/main.js',);
                        script.setAttribute('type', 'module',);
                        callback();
                        document.body.appendChild(script);
                    }
                }
            } 
        }
    }

    loadSource(resources, resContainer, () => {
        // window.location.href = './YunGoo.html';
        document.body.innerHTML = `
        <!-- 桌面，用来包含桌面图标 -->
        <div class="desktop" id="desktop">

            <!-- 空白控件，或者说桌面控件 -->
            <input type="radio" name="focusController" id="desktopCtrl">

            <ul id="desktopIconContainer">
                <!-- js生成桌面网格和图标 -->
            </ul>
        </div>

        <!-- ------------------右侧通知中心---------------- -->
        <input type="radio" name="focusController" id="msgCenterCtrl">
        <div id="msgCenter" class="msg-center">
            <div class="msg-center-container">

                <div class="msg">
                    <div class="ctrl">管理通知</div>
                    <ul id="msgCtainer">
                        <!-- js生成消息通知 -->
                    </ul>
                </div>

                <input type="checkbox" id="fold-setting">
                <div class="setting">
                    <div class="setting-container">
                        <div class="ctrl">
                            <span class="fold"><label for="fold-setting"></label></span>
                            <span class="clear" id="clearAllMsg">清除所有通知</span>
                        </div>
                        <div class="items" id="msgCenterItemContainer">
                            <ul>
                                <!-- js生成设置项 -->
                            </ul>
                        </div>

                        <div class="bright-ctrl">
                            <i class="fas fa-sun"></i>
                            <div class="brightness">
                                <div class="total" id="brightCtrl">
                                    <div class="bar">
                                        <div class="slider"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- ------------------底部任务栏------------------>
        <input type="radio" name="focusController" id="taskBarCtrl">
        <div class="task-bar" id="taskBar">
            <div class="task-bar-container">
                <ul class="left-container">
                    <li class="start-btn">
                        <i class="fab fa-windows"></i>
                    </li>
                    <li class="tasks-container">
                        <ul id="tasksContainer"></ul>
                    </li>
                </ul>

                <ul class="right-container">
                    <li class="show-desktop-btn">
                        <span class="show-desktop" id="showDesktop"></span>
                    </li>
                    <label for="msgCenterCtrl">
                        <li title="通知中心" id="msgCenterBtn">
                            <span class="message">
                                <i class="fa fa-comment-alt"></i>
                            </span>
                        </li>
                    </label>
                    <label for="calendarCtrl">
                        <li id="timeOnTaskBarBtn">
                            <span class="time" id="timeOnTaskBar">
                                <!-- js显示时间 -->
                            </span>
                        </li>
                    </label>

                    <label>
                        <input type="checkbox" id="inputMethodCtrl">
                        <li title="语言模式">
                            <span class="input-method">
                            </span>
                        </li>
                    </label>

                    <li title="显示隐藏的图标">
                        <span class="more">
                            <i class="fa fa-angle-up"></i>
                        </span>
                    </li>
                </ul>
            </div>

        </div>

        <!-- --------------------日期窗口---------------- -->
        <input type="radio" name="focusController" id="calendarCtrl">
        <div class="date">
            <div class="top">
                <div class="time" id="timeOnDatePanel">00:00:00</div>
                <div class="day" id="dayOnDatePanel">0000年0月0日 某某年零零月零零日</div>
            </div>
            <div class="main">
                <div class="select">
                    <span class="current-month" id="monthOnDatePanel">
                        0000年0月
                    </span>
                    <div class="ctrl">
                        <i class="fa fa-chevron-up" id="preMonth"></i>
                        <i class="fa fa-chevron-down" id="nextMonth"></i>
                    </div>
                </div>
                <div class="weekdays">
                    <ul>
                        <li>一</li>
                        <li>二</li>
                        <li>三</li>
                        <li>四</li>
                        <li>五</li>
                        <li>六</li>
                        <li>日</li>
                    </ul>
                </div>
                <div class="days" id="calendarDays">
                    <!-- 由js生成日期 -->
                </div>
            </div>
            <div class="setting">
                <span>日期和时间设置</span>
            </div>
        </div>

        <!-- --------------------开始菜单---------------- -->
        <div class="start-menu"></div>

        <!-- --------------------右键菜单控件----------------- -->
        <input type="radio" name="focusController" id="rightMenuCtrl">

        <script src="/socket.io/socket.io.js"></script>
        <script src="./js/main.js" type="module"></script>

        <!-- 右下角通知弹框 -->
        <div class="system-notification">
            <ul id="systemNotificationContainer"></ul>
        </div>`;
    });
})();
